<template>
  <div>
    <div>
      <el-upload class="upload-demo" drag action="/uploadxml" :on-success="uploadSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传VPN系统导出的配置文件</div>
      </el-upload>
    </div>
    <div v-if="isDealing" style="text-align: left">上传成功！请点击【处理】按钮将待处理的MAC地址和账户添加进配置文件。
      <br>
      <el-button type="primary" @click="dealList">处理</el-button>
    </div>
    <div v-if="isDownload" style="text-align: left">添加成功！请下载新的配置文件，将新文件导入到vpn系统中。
      <br>
      <a href="/get_dealedxml" download="/get_dealedxml.xml">下载文件</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDealing: false,
      isDownload: false
    };
  },
  methods: {
    uploadSuccess(response) {
      if (response.id == 101) {
        this.isDealing = true;
      } else {
        this.$message({
          message: "上传的文件不对，请重新上传",
          type: "warn"
        });
      }
    },
    dealList() {
      this.axios
        .get("/deallist")
        .then(response => {
          if (response.data.success == 1) {
            this.isDownload = true;
          } else {
            this.$message({
              message: "上传的文件不对，请重新上传",
              type: "warn"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
